import CodeView from '../../../shared/components/CodeView.jsx';
import { getDisplayElementById } from '../../shared/helpers';
import * as Base from './example';

<div className="doc lead">
  Specify the visibility of elements by showing and hiding. It's best practice to swap the hide and show classes rather than use them concurrently, as this will cause issues.
</div>

## Examples

### Assistive Text
Use the `slds-assistive-text` class to enable a screen reader to read text that is hidden. This class is typically used to accompany icons and other UI elements that show an image instead of text.

<CodeView>
  {getDisplayElementById(Base.examples, 'assistive-text')}
</CodeView>

### Collapsed / Expanded
The `.slds-is-collapsed` class hides the elements contained inside by controlling the height and overflow properties. Use the `.slds-is-expanded` class to show the elements contained inside in their normal expanded state.

<CodeView>
  {getDisplayElementById(Base.examples, 'collapsed-expanded')}
</CodeView>

### Hidden / Visible
You can hide an element but reserve the space on the page for when the element is made visible again. To hide the element, use the  `slds-hidden` class. To make it visible again, use the `slds-visible` class.

Note that `.slds-hidden` and any of the `.slds-visible` utility classes should not be used together at the same time on the same element; doing so will cause your element to remain hidden.

<CodeView>
  {getDisplayElementById(Base.examples, 'hidden-visible')}
</CodeView>

### Hide / Show
To hide any type of element from view and from screen readers, use the `.slds-hide` class. Once hidden, you can display the content by using JavaScript to swap `.slds-hide` with `.slds-show`; This class will set the `display` property to `block`. If you need to display your hidden element as `inline` or `inline-block`, you can use the `.slds-show_inline` or `.slds-show_inline-block` classes, respectively.

Note that `.slds-hide` and any of the `.slds-show-*` utility classes should not be used together at the same time on the same element; doing so will cause your element to remain hidden.

<CodeView>
  {getDisplayElementById(Base.examples, 'hide-show')}
</CodeView>

### Transition Hide / Show
To slowly transition an element from hiding and showing, use the  `slds-transition-hide` and `slds-transition-show` classes . They toggle the element's opacity and also reserve its space. Note: To control the timing of the transition, add an additional `transition` property to control the opacity change.

<CodeView>
  {getDisplayElementById(Base.examples, 'transition-hide-show')}
</CodeView>

### Responsive
Responsive visibility classes will hide content on specific breakpoints. `slds-show_[breakpoint]` renders `display: none` when the the view port width is smaller than the breakpoint, and does nothing if it is bigger or equal. `slds-hide_[breakpoint]` does the opposite by rendering `display: none` when the the viewport width is bigger or equal than the breakpoint, and does nothing if it is smaller.

|Class Name|Less than 320px|X-Small (>= 320px)|Small (>= 480px)|Medium (>= 768px)|Large (>= 1024px)|X-Large (>= 1280px)|
|---|---|---|---|---|---|---|
|`.slds-hide_x-small`|Show|Hide|Hide|Hide|Hide|Hide|
|`.slds-show_x-small`|Hide|Show|Show|Show|Show|Show|
|`.slds-hide_small`|Show|Show|Hide|Hide|Hide|Hide|
|`.slds-show_small`|Hide|Hide|Show|Show|Show|Show|
|`.slds-hide_medium`|Show|Show|Show|Hide|Hide|Hide|
|`.slds-show_medium`|Hide|Hide|Hide|Show|Show|Show|
|`.slds-hide_large`|Show|Show|Show|Show|Hide|Hide|
|`.slds-show_large`|Hide|Hide|Hide|Hide|Show|Show|
|`.slds-hide_x-large`|Show|Show|Show|Show|Show|Hide|
|`.slds-show_x-large`|Hide|Hide|Hide|Hide|Hide|Show|

<CodeView>
  {getDisplayElementById(Base.examples, 'responsive')}
</CodeView>
